<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			select{
			width: 170px;
			height: 200px;
			font-size: 16px;
			background-color:  aqua;
			}
			
		</style>
	</head>
	<body>
		<select name="" id="sel1" size="10" multiple="multiple">
			<option value="">香蕉</option>
			<option value="">苹果</option>
			<option value="">鸭梨</option>
			<option value="">葡萄</option>
		</select>
		<input type="button" value = ">>>">
		<input type="button" value = "<<<">
		<input type="button" value = ">">
		<input type="button" value = "<">
		<select name="" id="sel2" size="10" multiple="multiple">

		</select>
		<script type="text/javascript">
			//需求1:点击>>>和<<<两个按钮,所有的子元素标签都跑到对方的标签当中.
			//步骤:
			//1.获取相关元素,并绑定事件
			//2.获取子元素,整体的添加到另外一边的标签中
			
			
			//1.获取相关元素,并绑定事件
			var sel1 = document.getElementById("sel1");
			var sel2 = document.getElementById("sel2");
			var inpArr = document.getElementsByTagName("input");
			
			//如果不带参数,我们可以直接绑定一个函数名,但是因为带有参数,所以我们需要匿名函数去调用这个函数
			inpArr[0].onclick = function () {
				//调用
				fn1(sel1,sel2);
			}
			inpArr[1].onclick = function () {
				fn1(sel2,sel1)
			}
			inpArr[2].onclick = function () {
				//调用
				fn2(sel1,sel2);
			}
			inpArr[3].onclick = function () {
				fn2(sel2,sel1)
			}
			function fn1(ele1,ele2){
				var arr = ele1.children;
				for(var i = arr.length-1;i>=0;i--){
					ele2.appendChild(arr[0]);
				}
			}
			//把sel1和sel2设置成两个形参,通过调用的时候先后传递达成不一样的需求
			function fn2(ele1,ele2){
				var arr = ele1.children;
				for(var i = arr.length-1;i>=0;i--){
					if(arr[i].selected === true){
						arr[i].selected = false;
						ele2.appendChild(arr[i]);
					}
					
				}
				
			}
			
		</script>
	</body>
</html>
